---
import "../../styles/asciinema-player.css";
import { faArrowRight, faDownload } from "@fortawesome/free-solid-svg-icons";
import FontAwesomeIcon from "../FontAwesomeIcon.astro";
import InstallCommand from "./InstallCommand.astro";
---

<section class="relative overflow-hidden">
  <!-- Background Elements -->
  <div class="absolute inset-0 z-0 blur-3xl blur-fix-performance">
    <div class="absolute w-full h-full bg-secondary/20"></div>
    <div class="relative w-full h-full max-w-480 mx-auto">
      <div
        class="absolute -top-24 -left-30 w-128 h-128 bg-primary/15 md:bg-primary/20 rounded-full blur-3xl blur-fix-performance opacity-70"
      >
      </div>
      <div
        class="absolute -bottom-24 -right-30 w-128 h-128 bg-accent/15 md:bg-accent/20 rounded-full blur-3xl blur-fix-performance opacity-70"
      >
      </div>
      <div
        class="absolute -bottom-8 -left-8 w-160 h-160 bg-background/80 rounded-full blur-3xl blur-fix-performance opacity-70 md:opacity-100"
      >
      </div>
      <div
        class="absolute -top-8 -right-8 w-160 h-160 bg-background/80 rounded-full blur-3xl blur-fix-performance opacity-70 md:opacity-100"
      >
      </div>
    </div>
  </div>
  <div class="container relative z-10 py-16 md:pt-28 md:pb-22 gap-6">
    <div class="flex flex-col xl:flex-row xl:items-center xl:px-3 2xl:px-5">
      <div
        class="flex flex-col items-center text-center xl:text-start xl:items-start gap-4 xl:w-9/16 xl:min-w-9/16 xl:max-w-9/16 2xl:w-11/20 2xl:min-w-11/20 2xl:max-w-11/20"
      >
        <div class="badge mb-2">
          Built for sysadmins &mdash; fast, secure, and easy to configure
        </div>
        <h1
          class="text-[3.5rem] md:text-[4.5rem] xl:text-[3.925rem] 2xl:text-[4.695rem] font-extrabold font-stretch-semi-condensed tracking-tight leading-none mb-4"
        >
          Serve your website in&nbsp;minutes, <span
            class="bg-clip-text text-transparent bg-gradient-to-r from-primary to-accent"
            >not&nbsp;hours</span
          >
        </h1>
        <p
          class="text-lg md:text-xl text-muted-foreground max-w-[800px] mb-8 xl:w-9/10"
        >
          Ferron is a fast web server with automatic TLS certificate management,
          easy configuration, and rock-solid security &mdash; so you can go live
          in minutes.
        </p>
        <div class="flex flex-col sm:flex-row gap-4 max-w-md w-full xl:w-auto">
          <a href="#install" class="btn btn-primary group">
            <FontAwesomeIcon icon={faDownload} class="mr-2 !h-5 w-5" />
            Start installation
            <FontAwesomeIcon
              icon={faArrowRight}
              class="ml-2 !h-4 w-4 transition-transform group-hover:translate-x-1"
            />
          </a>
          <a href="/docs" class="btn btn-secondary"> Documentation </a>
        </div>
        <div class="mt-12 w-full xl:w-37/40 2xl:w-9/10">
          <InstallCommand />
        </div>
      </div>
      <div
        class="py-10 xl:py-6 xl:pe-1 xl:ps-2 2xl:pe-2 2xl:ps-4 xl:w-7/16 xl:min-w-7/16 xl:max-w-7/16 2xl:w-9/20 2xl:min-w-9/20 2xl:max-w-9/20"
      >
        <div class="w-full h-auto aspect-3/2">
          <div data-hero-demo></div>
        </div>
        <p class="text-muted-foreground text-center mt-2">
          Watch, as Ferron serves a website with automatic TLS setup in minutes.
        </p>
      </div>
    </div>
  </div>
</section>

<script>
  import heroRecording from "../../assets/ferron-demo.cast?url";
  import * as AsciinemaPlayer from "asciinema-player";

  function loadPlayer() {
    const heroElement = document.querySelector("[data-hero-demo]");
    if (!heroElement) return;

    AsciinemaPlayer.create(heroRecording, heroElement, {
      cols: 80,
      rows: 23,
      autoplay: true,
      loop: true,
      poster: "npt:0:0",
      theme: "ferron",
      terminalFontFamily: "var(--font-jetbrains-mono)"
    });
  }

  document.addEventListener("astro:after-swap", () => {
    loadPlayer();
  });

  loadPlayer();
</script>
